{% extends "manage.html" %}
{% load custom_filters %}
{% load static %}
{% block title %} Add Question {% endblock title %}
{% block pagetitle %} Add Question {% endblock pagetitle %}

{% block css %}
  <link rel="stylesheet" type="text/css" href="{% static 'yaksh/css/autotaggit.css' %}">
{% endblock %}

{% block script %}
  <script type="text/javascript" src="{% static 'yaksh/js/tinymce/js/tinymce/tinymce.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'yaksh/js/add_question.js' %}"></script>
  <script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML"></script>
{% endblock %}

{% block onload %} onload='javascript:textareaformat();' {% endblock %}

{% block content %}
<div class="container">
  <a class="btn btn-primary" href="{% url 'yaksh:show_questions' %}">
    <i class="fa fa-arrow-left"></i>&nbsp;Back
  </a>
  <br><br>
  {% if messages %}
      {% for message in messages %}
      <div class="alert alert-dismissible alert-{{ message.tags }}">
          <button type="button" class="close" data-dismiss="alert">
              <i class="fa fa-close"></i>
          </button>
          <strong>{{ message }}</strong>
      </div>
      {% endfor %}
  {% endif %}
  <form action="{% if question %}{% url 'yaksh:add_question' question.id %}{% endif %}" method="post" id="question_form" name=frm onSubmit="return autosubmit();" enctype="multipart/form-data">
    {% csrf_token %}
    <table class="table table-responsive-sm">
      {% if qform.errors %}
        {% for field in qform %}
            {% for error in field.errors %}
                <div class="alert alert-dismissible alert-danger">
                    <button type="button" class="close" data-dismiss="alert">
                        <i class="fa fa-close"></i>
                    </button>
                    <strong>{{ error|escape }}</strong>
                </div>
            {% endfor %}
        {% endfor %}
        {% for error in qform.non_field_errors %}
            <div class="alert alert-dismissible alert-danger">
                <button type="button" class="close" data-dismiss="alert">
                    <i class="fa fa-close"></i>
                </button>
                <strong>{{ error|escape }}</strong>
            </div>
        {% endfor %}
      {% endif %}
      {% for field in qform %}
          <tr>
            <td>{{ field.label }}</td>
            <td>{{ field }} <small>{{ field.help_text }}</small></td>
          </tr>
      {% endfor %}
      <tr>
        <td> File: </td>
        <td>
          <div class="input-group mb-3">
            <div class="custom-file">
              {{ fileform.file_field }}{{ fileform.file_field.errors }}
                <label class="custom-file-label" for="id_file">
                    Choose file
                </label>
            </div>
          </div>
        </td>
      </tr>
    </table>
    {% if uploaded_files %}
      <div class="card">
        <div class="card-header">
          <h3>Uploaded files</h3>
        </div>
        <div class="card-body">
          <div>
          <p>Check on <b>Delete</b> to delete files,
          <b>Extract</b> to extract files and <b>Hide</b> to hide files
          </p>
          <a href="https://yaksh.readthedocs.io/en/latest/moderator_docs/creating_question.html#setting-up-questions" class="btn btn-primary" target="blank">
            <i class="fa fa-info-circle"></i>&nbsp;More info
          </a>
          </div>
          <br>
          <ul class="list-group">
            {% for file in uploaded_files %}
            <li class="list-group-item">
              <input type="checkbox" name="clear" value="{{file.id}}">
                Delete
              </input>
              <input type="checkbox" name="extract" value="{{file.id}}">
                {% if file.extract %} Dont extract {% else %} Extract {% endif %}
              </input>
              <input type="checkbox" name="hide" value="{{file.id}}">
                {% if file.hide %} Show {% else %} Hide {% endif %}
              </input>
              <a href="{{file.file.url}}">{{ file.file.name|file_title }}</a>
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}
    <br>
    <div class="card">
      <div class="card-header">
        <h3>Test Cases</h3>
      </div>
      <div class="card-body">
        {% if question %}
        <div class="row">
          <div class="col pb-4">
            <tr><td>Add Test Case:</td>
              <td>
              <select id="case_type" class="form-control" name="case_type" onchange="frm.submit()">
                <option value="" selected="selected">Select Testcase</option>
                {% for key, value in testcase_options %}
                  <option value="{{key}}">{{value}}</option>
                {% endfor %}
              </select>
              </td>
            </tr>
          </div>
        </div>
        {% endif %}
        {% for formset in formsets %}
          {{ formset.management_form }}
          <div id="accordion">
            {% for form in formset %}
              <div class="card">
                <div class="card-header">
                  <div class="row">
                    <div class="col-md-4">
                      <span class="badge badge-info">
                        Test case {{forloop.counter}}.
                      </span>
                    </div>
                    <div class="ml-auto">
                      <a class="card-link" data-toggle="collapse" href="#collapse{{form.instance.id}}">
                        Details&nbsp;<i class="fa fa-angle-down"></i></i>
                      </a>
                    </div>
                  </div>
                </div>
                <div id="collapse{{form.instance.id}}" class="collapse {% if formset.extra == 1 %} show {% else %} hide {% endif %}" data-parent="#accordion">
                  <div class="card-body">
                    {% autoescape off %}
                      {{form.as_p}}
                    {% endautoescape %}
                  </div>
                </div>
              </div>
              <br>
            {% endfor %}
          </div>
        {% endfor %}
      </div>
    </div>
    <br>
    <center>
      <button class="btn btn-lg btn-success" type="submit" name="save_question">
        <i class="fa fa-save"></i>&nbsp;Save
      </button>
    </center>
  </form>
</div>

{% endblock %}
